import React from 'react'
import { Row, Col, Input, Button, Icon } from 'antd'
import styles from './List.less'
import moment from 'moment'
import JsBarcode from 'jsbarcode';
const { TextArea } = Input
var contractor = ""
var documentCreater = ""

class Print extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            year: "",  //档案年份
            documentInfo: "",  //档案
            notarialMatters: "", //公证事项
            applyName: "",  //申请人
            remarks: "",  //备注
            collectionAt: "",  //收件日期
            notarizationAt: "",  //公证日期
            archiveAt: "",    //归档日期
            contractor: "",   //承办人
            documentCreater: "",   //制档人
            keepTerm: "",    //保存期限
            documentCount: "",  //本卷总共页数
            coverCode: "",   //条形码编号
            documentId: "",  //对应的档案ID
        }
    }
    returnList = () => {
        const { goList } = this.props
        goList()
    }
    print1 = () => {
        window.print()
    }
    printDiv1 = () => {
        $("div#text1").printArea();
    };
    printDiv = () => {
        const { showList } = this.props
        showList()
        this.save()
        location.reload()

        // var printContents = document.getElementById(divName).innerHTML;
        // var printContents = refs.divName;

        var printContents = this.printId.innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;

        // var dom = this.printId;
        // var win = window.open('');
        // win.document.write(dom.outerHTML);
        // win.print();
        // win.close();


    }
    save = () => {
        const { printDetails, newCover, printInfo, updateCover, codeNumber } = this.props
        const params = {
            year: this.state.year || printDetails.documentYear,  //档案年份
            documentInfo: this.state.documentInfo,  //档案
            notarialMatters: this.state.notarialMatters || printDetails.notarialMatters, //公证事项
            applyName: this.state.applyName || printDetails.applyName,  //申请人
            remarks: this.state.remarks,  //备注
            collectionAt: this.state.collectionAt,  //收件日期
            notarizationAt: this.state.notarizationAt || printDetails.notarizationAt.split(' ')[0],  //公证日期
            archiveAt: this.state.archiveAt || moment().format('YYYY-MM-DD'),    //归档日期
            contractor: this.state.contractor || printDetails.contractorUserId,   //承办人
            documentCreater: this.state.documentCreater || printDetails.createdUserId,   //制档人
            keepTerm: this.state.keepTerm || printDetails.storageLife,    //保存期限
            documentCount: this.state.documentCount || printDetails.pageNumber,  //本卷总共页数

            documentId: printDetails.documentId,  //对应的档案ID
        }
        if (printInfo) {
            delete params.documentId
            delete params.coverCode
            params.id = printInfo.documentCover.id
            updateCover(params)
        } else {
            params.coverCode = codeNumber.barCode,   //条形码编号
                newCover(params)
        }

    }
    yearChange = (e) => {
        this.setState({ year: e.target.value })
    }
    documentInfoChange = (e) => {
        this.setState({ documentInfo: e.target.value })
    }
    notarialMattersChange = (e) => {
        this.setState({ notarialMatters: e.target.value })
    }
    applyNameChange = (e) => {
        this.setState({ applyName: e.target.value })
    }
    remarksChange = (e) => {
        this.setState({ remarks: e.target.value })
    }
    collectionAtChange = (e) => {
        this.setState({ collectionAt: e.target.value })
    }
    notarizationAtChange = (e) => {
        this.setState({ notarizationAt: e.target.value })
    }
    archiveAtChange = (e) => {
        this.setState({ archiveAt: e.target.value })
    }
    contractorChange = (e) => {
        this.setState({ contractor: e.target.value })
    }
    documentCreaterChange = (e) => {
        this.setState({ documentCreater: e.target.value })
    }
    keepTermChange = (e) => {
        this.setState({ keepTerm: e.target.value })
    }
    documentCountChange = (e) => {
        this.setState({ documentCount: e.target.value })
    }
    creactCode = () => {
        const { getCode, codeNumber, printInfo } = this.props
        var codes = ''
        if (printInfo) {
            codes = printInfo.documentCover.coverCode
        } else {
            codes = codeNumber.barCode
        }
        JsBarcode("#barcode", codes, {
            width: 2,
            height: 40,
        })
        // JsBarcode(this._barcodeSVG, codes, 
        //     {
        //       displayValue: false,  //  不显示原始值
        //       background: '#4b8b7f',  //  背景色
        //       lineColor: 'rgba(255,255,255,0.5)', // 线条颜色
        //       width: 1  // 线条宽度
        //     }
        //   );
    }
    render() {

        const { printDetails, userList, printInfo, codeNumber } = this.props
        if (!printDetails) {
        	return null
        }
        // console.log(printDetails)
        // console.log(applyUser)
        if(!userList){
            return null
        }
        // console.log(printDetails)
        userList.map((item,i)=>{
            if(printDetails.contractorUserId === item.userId){
                contractor = item.username
            }
            if(printDetails.createdUserId === item.userId){
                documentCreater = item.username
            }
        })
        return (
            <div>
                <div style={{ width: "100%", display: "flex", justifyContent: "center", marginBottom: 20 }}>
                    <div style={{ width: 794, background: "#ebf8f2", display: 'flex', borderRadius: 5, border: "1px solid #A7E1C4" }}>
                        <Icon type="check-circle-o" style={{ color: "#3dbd7d", lineHeight: "80px", margin: "0 20px", fontSize: 16 }} />
                        <div>
                            <p style={{ marginTop: 20, fontSize: 18 }}>档案已归档</p>
                            <p style={{ fontSize: 14 }}>已成功归档，您现在可为档案生成条形码并进行封面信息编辑及打印！</p>
                        </div>
                    </div>
                </div>
                <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
                    <div style={{ width: 794, display: "flex", justifyContent: "space-between", lineHeight: "40px" }}>
                        <span style={{ color: "black", fontSize: 16, fontWeight: 600 }}>封面编辑区域</span>
                        <Button onClick={this.creactCode} type="primary">生成条码</Button>
                    </div>
                </div>
                <div id="text1" style={{ width: "100%", textAlign: 'center', display: 'flex', justifyContent: "center", marginBottom: 105 }}>
                    <div ref={self => (this.printId = self)} style={{ width: 794, border: "1px dashed gray", paddingBottom: 105 }}>
                        <div style={{ display: "flex", alignItems: "center", height: 110, justifyContent: "space-between" }}>
                            <div style={{ marginLeft: 121, width: 218 }}>
                                <div style={{ border: "1px solid gray" }}>
                                    <div className={styles.span} style={{ width: 80, borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 22 }}>年度</div>
                                    <div className={styles.span} style={{ width: 130 }}>
                                        <input defaultValue={printDetails ? printDetails.documentYear : ""} onBlur={this.yearChange} style={{ width: "100%", border: "none", outline: "none", textAlign: "center", fontFamily: "华文仿宋", fontSize: 14 }} />
                                    </div>
                                </div>
                                <div style={{ border: "1px solid gray", borderTop: 0 }}>
                                    <div className={styles.span} style={{ width: 80, borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 22 }}>档案</div>
                                    <div className={styles.span} style={{ width: 130 }}>
                                        <input defaultValue="" onBlur={this.documentInfoChange} style={{ width: "100%", border: "none", outline: "none", textAlign: "center", fontFamily: "华文仿宋", fontSize: 14 }} />
                                    </div>
                                </div>
                            </div>
                            <div style={{ marginRight: 40 }}>
                                <svg id="barcode" ref={(ref) => this._barcodeSVG = ref}></svg>
                                {/* <img style={{ width: 210 }} src={require("../../../assets/barCode.png")} /> */}
                            </div>
                        </div>
                        <div style={{ width: 618, height: 895, marginLeft: 121, border: "1px solid gray" }}>
                            <div style={{ color: "black", lineHeight: "60px", fontSize: 26, fontWeight: 600, borderBottom: "1px solid black", textAlign: "center" }}>
                                <p style={{ fontFamily: "SimSun", fontSize: 30 }}>四川省成都市国力公证处公证卷宗</p>
                            </div>
                            <div style={{ lineHeight: "60px", borderBottom: "1px solid black", letterSpacing: 5, textAlign: "center" }}>
                                <input defaultValue="(2018)川国公证涉字第     号" style={{ width: "100%", border: "none", outline: "none", textAlign: "center", fontFamily: "FangSong", fontSize: 16 }} />
                            </div>
                            <div style={{ lineHeight: "30px", borderBottom: "1px solid black", display: "flex" }}>
                                <div style={{ width: 60, letterSpacing: 10, fontWeight: 600, borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16 }}>
                                    <span>公证事项</span>
                                </div>
                                <div style={{ width: 555 }}>
                                    <TextArea defaultValue={printDetails ? printDetails.notarialMatters.replace(/#/g, ",") : ""} onBlur={this.notarialMattersChange} style={{ height: "100%", border: "none", outline: "none", resize: "none", fontFamily: "FangSong", fontSize: 22, textAlign: "center" }} />
                                </div>
                            </div>

                            <div style={{ height: 260, display: "flex" }}>
                                <div style={{ width: 60, borderRight: "1px solid black", fontWeight: 600, textAlign: "center", fontFamily: "FangSong", fontSize: 16 }}>
                                    <p className={styles.p} style={{ paddingTop: 70 }}>申</p>
                                    <p className={styles.p}>请</p>
                                    <p className={styles.p} style={{ paddingBottom: 100 }}>人</p>
                                </div>
                                <div style={{ width: 555, borderBottom: "1px solid black", height: 261 }}>
                                    <TextArea defaultValue={printDetails ? printDetails.applyName.replace(/#/g, ",") : ""} onBlur={this.applyNameChange} style={{ height: "100%", border: "none", outline: "none", resize: "none", fontFamily: "FangSong", fontSize: 22, textAlign: "center" }} />
                                </div>
                            </div>
                            <div style={{ height: 260, display: "flex" }}>
                                <div style={{ width: 60, borderRight: "1px solid black", fontWeight: 600, borderTop: "1px solid black", borderBottom: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16 }}>
                                    <p className={styles.p1} style={{ paddingTop: 70 }}>备</p>
                                    <p className={styles.p1} style={{ paddingBottom: 70 }}>注</p>
                                </div>
                                <div style={{ width: 555, borderBottom: "1px solid black", borderTop: "1px solid black" }}>
                                    <TextArea onBlur={this.remarksChange}  defaultValue={printDetails ? printDetails.remarks:""} style={{ height: "100%", border: "none", outline: "none", resize: "none", fontFamily: "FangSong", fontSize: 22, textAlign: "center" }} />
                                </div>
                            </div>
                            <div style={{ display: "flex", lineHeight: "58px" }}>
                                <div style={{ width: "33.3%", borderRight: "1px solid black", display: "flex" }}>
                                    <div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>收件日期</div>
                                    <div style={{ width: "50%" }}>
                                        <input onBlur={this.collectionAtChange} defaultValue={printDetails ? printDetails.createdTime.split(' ')[0] : ""} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "苹方", fontSize: 12 }} />
                                    </div>
                                </div>
                                <div style={{ width: "33.3%", borderRight: "1px solid black", display: "flex" }}>
                                    <div style={{ width: "51%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>公证日期</div>
                                    <div style={{ width: "50%" }}>
                                        <input onBlur={this.notarizationAtChange} defaultValue={printDetails ? printDetails.notarizationAt.split(' ')[0] : ""} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "苹方", fontSize: 12 }} />
                                    </div>
                                </div>
                                <div style={{ width: "33.3%", display: "flex" }}>
                                    <div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>归档日期</div>
                                    <div style={{ width: "50%" }}>
                                        <input onBlur={this.archiveAtChange} defaultValue={moment().format('YYYY-MM-DD')} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "苹方", fontSize: 12 }} />
                                    </div>
                                </div>
                            </div>
                            <div style={{ display: "flex", lineHeight: "58px", borderTop: "1px solid black" }}>
                                <div style={{ width: "50%", borderRight: "1px solid black", display: "flex" }}>
                                    <div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>承办人</div>
                                    <div style={{ width: "50%" }}>
                                        <input onBlur={this.contractorChange} defaultValue={contractor} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "仿宋", fontSize: 14 }} />
                                    </div>
                                </div>
                                <div style={{ width: "50%", display: "flex" }}>
                                    <div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>制档人</div>
                                    <div style={{ width: "50%" }}>
                                        <input onBlur={this.documentCreaterChange} defaultValue={documentCreater} style={{ border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "仿宋", fontSize: 14 }} />
                                    </div>
                                </div>
                            </div>
                            <div style={{ display: "flex", lineHeight: "58px", borderTop: "1px solid black" }}>
                                <div style={{ width: "50%", borderRight: "1px solid black", display: "flex" }}>
                                    <div style={{ width: "50%", borderRight: "1px solid black", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>保管期限</div>
                                    <div style={{ width: "50%" }}>
                                        <input onBlur={this.keepTermChange} defaultValue={printDetails ? printDetails.storageLife : ""} style={{ height: 56, border: "none", outline: "none", textAlign: "center", width: "100%", fontFamily: "仿宋", fontSize: 14 }} />
                                    </div>
                                </div>
                                <div style={{ width: "50%", textAlign: "center", fontFamily: "FangSong", fontSize: 16, fontWeight: 600 }}>
                                    本卷共&nbsp;&nbsp;&nbsp;
                                    <input onBlur={this.documentCountChange} defaultValue={printDetails ? printDetails.pageNumber : ""} style={{ height: 56, border: "none", outline: "none", textAlign: "center" }} />
                                    &nbsp;&nbsp;&nbsp;张
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style={{ textAlign: "center" }}>
                    <Button type="primary" onClick={this.printDiv}>打印并保存</Button>
                    <Button type="primary" onClick={this.save} style={{ marginLeft: 20 }}>暂存，不打印</Button>
                </div>
                <Button style={{ width: 200, marginTop: 30, height: 40 }} type="primary" onClick={this.returnList}>返回</Button>
                {/* <div className={styles.printable}>
                    Your normal page contentss
                </div>

                <div className={styles.noprintable}>
                    Printer version
                </div> */}
            </div>
        )
    }
}

export default Print